<template>
    <div class="bingBox">
        <van-nav-bar
            left-arrow
            @click-left="onClickLeft"
            style="background: transparent"
        />
        <van-form @submit="onSubmit">
            <h2>购了么</h2>
            <van-cell-group inset>
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-cell-group>
            <router-link to="/register">还没有注册？立即注册</router-link>
            <div style="margin: 35px">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
import { UserLogin } from '../hooks/Login'
const { onClickLeft, username, password, onSubmit } = UserLogin()
</script>

<style lang="scss" scoped>
.bingBox {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url(../../public/image/微信图片_20230208091605.jpg);
    background-size: 100% 100%;
    :deep(.van-icon:before) {
        color:#fff;
        font-size: 20px;
    }
    .van-form {
        text-align: center;
        h2 {
            font-size: 40px;
            color: aliceblue;
            margin-bottom: 70px;
            text-shadow: 5px 5px 5px aliceblue, 0px 0px 2px aliceblue;
        }
        .van-cell-group {
            width: 80%;
            margin: 0 auto;
        }

        a {
            color: rgb(222, 225, 227);
            float: right;
            margin: 10px 0px;
            margin-right: 20px;
            font-size: 15px;
        }
    }
    :deep(.van-icon-arrow-left):before {
        font-size: 20px;
    }
    .van-nav-bar::after {
        border-bottom: 0;
    }
}
</style>
